<template>
  <div class="data_synchronization_detail">
    <button @click="exportImage">导出</button>
    <div class="main_container">
      <mindmap
        id="mindmap"
        v-model="mindData"
        :height="getSvgHeight()"
        :strokeWidth="2"
        :xSpacing="20"
        :ySpacing="10"
        :gps="false"
        :fitView="false"
        :zoomable="false"
        :download="false"
        :contextMenu="false"
        :showUndo="false"
        :keyboard="false"
        :draggable="false"
        :showNodeAdd="false"
      ></mindmap>
      <!-- </div> -->
    </div>
  </div>
</template>

<script>
import mindmap from '@hellowuxin/mindmap'
import { ExportImg } from '@/utils/methods'

export default {
  components: {
    mindmap,
  },
  data () {
    return {
      mindData: [
        {
          name: '如何学习D3',
          children: [
            {
              name: '预备知识',
              children: [
                { name: 'HTML & CSS' },
                { name: 'JavaScript' },
                // { name: 'HTML & CSS' },
                // { name: 'JavaScript' },
                // { name: 'HTML & CSS' },
                // { name: 'JavaScript' },
                // { name: 'HTML & CSS' },
                { name: 'JavaScript' },
              ],
            },
            {
              name: '安装',
              children: [
                { name: 'JavaScript' },
                { name: 'HTML & CSS' },
                { name: 'JavaScript' },
                { name: 'HTML & CSS' },
                { name: 'JavaScript' }, 
                { name: 'JavaScript' },
                { name: 'HTML & CSS' },
                { name: 'HTML & CSS' },
                { name: 'JavaScript' },
                { name: 'JavaScript' },
                { name: 'HTML & CSS' },
                { name: 'JavaScript' },
                { name: 'HTML & CSS' },
                { name: 'JavaScript' }, 
                { name: 'JavaScript' },
                { name: 'HTML & CSS' },
                { name: 'HTML & CSS' },
                { name: 'JavaScript' },
                { name: 'JavaScript' },
                { name: 'HTML & CSS' },
                { name: 'JavaScript' },
                { name: 'HTML & CSS' },
                { name: 'JavaScript' }, 
                { name: 'JavaScript' },
                { name: 'HTML & CSS' },
                { name: 'HTML & CSS' },
                { name: 'JavaScript' }
              ],
            },
            {
              name: '进阶',
              left: true,
              children: [
                { name: 'JavaScript' },
                { name: 'HTML & CSS' },
                { name: 'JavaScript' },
                { name: 'HTML & CSS' },
                { name: 'JavaScript' },
                { name: 'HTML & CSS' },
                { name: 'JavaScript' },
                { name: 'HTML & CSS' },
                { name: 'JavaScript' },
                { name: 'HTML & CSS' },
                { name: 'JavaScript' },
                { name: 'HTML & CSS' },
                { name: 'JavaScript' },
                // { name: 'HTML & CSS' },
                // { name: 'JavaScript' },
                // { name: 'HTML & CSS' },
                { name: 'JavaScript' },
                { name: 'HTML & CSS' },
                { name: 'JavaScript' },
              ]
            },
          ],
        },
      ],
    }
  },
  created () {
  },
  mounted () {
    let svgDom = document.querySelector('#mindmap svg g')
    let svgHeight = svgDom.getBoundingClientRect().height
    let imgTY = '50%'
    let imgTx = '50%'
    let imgS = '1'
    let boxWidth = document.querySelector('#mindmap svg').getBoundingClientRect().width - 48
    let svgWidth = svgDom.getBoundingClientRect().width
    // 思维导图的缩放
    if (svgWidth > boxWidth) {
      imgS = boxWidth / svgWidth
    }

    let mindMapDom = document.querySelector('#mindmap svg g g').childNodes
    let childList = Array.from(mindMapDom).slice(1, -2)

    // 在X轴的偏移
    let translateX = 0
    let translateXWay = null
    childList.forEach(item => {
      let itemWidth = item.getBoundingClientRect().width
      if (itemWidth > (boxWidth / 2) && translateX < itemWidth) {
        translateX = itemWidth
        translateXWay = item.__data__.dy < 0 ? 'left' : 'right'
      }
    })
    if (translateXWay) {
      if (translateXWay === 'left') {
        imgTx = translateX * imgS + 'px'
      } else if (translateXWay === 'right') {
        imgTx = (boxWidth - translateX + 50) * imgS + 'px'
      }
    }
    // 在Y轴的偏移
    if (svgHeight > 680 && childList.length > 1) {
      let maxHeight = 0
      childList.forEach((item) => {
        if (item.__data__ && item.__data__.dx && item.__data__.dx > 0) {
          let itemHeight = item.getBoundingClientRect().height
          let maxTy = item.__data__.dx
          let maxChild = Array.from(item.childNodes).slice(2, -2)
          let bigMaxTyArr = []
          let bigMaxTyHeight = 0
          maxChild.forEach(info => {
            if (info.__data__ && info.__data__.dx && info.__data__.dx < 0) {
              if (Math.abs(info.__data__.dx) > maxTy) {
                bigMaxTyArr.push(info)
              }
            }
          })
          if (bigMaxTyArr.length) {
            bigMaxTyArr.push(maxChild[bigMaxTyArr.length])
            bigMaxTyArr.forEach((item, index) => {
              if (bigMaxTyArr[index + 1]) {
                bigMaxTyHeight += (item.getBoundingClientRect().height - bigMaxTyArr[index + 1].getBoundingClientRect().height)
              } else {
                bigMaxTyHeight -= (maxTy - item.getBoundingClientRect().height)
              }
            })
            itemHeight -= bigMaxTyHeight
          }
          if (maxHeight < itemHeight) {
            maxHeight = itemHeight
          }
        }
      })
      let translateY = svgHeight - maxHeight + 94
      imgTY = translateY * imgS + 'px'
    }
    svgDom.style.transform = `translate(${imgTx}, ${imgTY}) scale(${imgS})`
  },
  methods: {
    getSvgHeight () {
      let svg = document.querySelector('#mindmap svg g')
      let g = document.querySelector('#mindmap svg')
      if (svg) {
        let height = svg.getBoundingClientRect().height

        g.removeChild(svg)

        setTimeout(() => {
          g.appendChild(svg)
          console.dir(svg);
          console.log(svg.style.transform);
          console.log(svg.transform.baseVal.getItem(0));
        }, 500)
        console.log(height);
        return height < 680 ? 680 : height + 200
      }
      // return 600
    },
    exportImage () {
      // console.log(this.$refs.ExportDiv);
      let dom = document.querySelector('#mindmap')  // 解决获取不到非原生标签的问题
      ExportImg(dom, `思维导图`, 'jpg')
    }
  },
}
</script>

<style lang="less" scoped>
.data_synchronization_detail {
  .main_container {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #192035;
  }
}

/deep/ div#mindmap svg {
  background-color: #192035;
  transform-origin: left top !important;
  g#content {
    transform-origin: left top !important;
    .depth_0.node {
      .depth_1.node {
        color: #6d6d6d; // 解决文字颜色问题
      }
    }
  }
}
</style>
